<template>
    <view class="container">
        <view class="bg-pic">
            <image :src="imagePath + '/app4/bg2.jpg'"></image>
        </view>

        <view class="line">
            <image :src="imagePath + '/app4/line.png'" />
        </view>

        <view class="results">
            <text>恭喜您！</text>
            <text>10道题目中您一共答对{{ right }}道题</text>
        </view>

        <view class="line">
            <image :src="imagePath + '/app4/line.png'" />
        </view>

        <view class="results-txt2">
            <text>您是第{{ querstion_quere }}位学习\n革命精神的观众</text>
        </view>

        <view class="footer">
            <navigator open-type="redirect" url="/pages/app4/haibao" class="navigator">获取海报</navigator>
            <navigator open-type="redirect" url="/pages/app4/list" class="navigator">重新答题</navigator>
        </view>
    </view>
</template>

<script>
import wrongModal from '@/components/wrongModal/wrongModal';
// pages/results/results.js
const app = getApp();
import service from '../../service/service';
import { quertionUp } from '../../service/api';
export default {
    components: {
        wrongModal
    },
    data() {
        return {
            imagePath: app.globalData.imagePath,
            totalScore: null,
            // 分数
            wrongList: [],
            // 错误的题数-乱序
            wrongListSort: [],
            // 错误的题数-正序
            chooseValue: [],
            // 选择的答案
            remark: ['好极了！你很棒棒哦', '哎哟不错哦', '别灰心，继续努力哦！'],
            // 评语
            modalShow: false,
            right: 0,
            querstion_quere: 0
        };
    },
    onLoad: function (options) {
        console.log(options);
        // wx.setNavigationBarTitle({ title: options.testId }) // 动态设置导航条标题

        // let wrongList = JSON.parse(options.wrongList);
        // let wrongListSort = JSON.parse(options.wrongListSort);
        // let chooseValue = JSON.parse(options.chooseValue);

        // // options.testId = "101-1"
        // var cates
        // var questionList

        //     try{
        //       questionList = wx.getStorageSync('questionList')
        //       cates  = wx.getStorageSync('cates',cates)
        //     }catch (e) {
        //     }
        // // var   questionList = jsonList.questionList[options.testId]  // 拿到答题数据
        // this.setData({
        //   totalScore: options.totalScore != ""?options.totalScore:"无",
        //   wrongList: wrongList,
        //   wrongListSort: wrongListSort,
        //   chooseValue: chooseValue,
        //   questionList: questionList,  // 拿到答题数据
        //   cates:cates,
        //   testId: options.testId  // 课程ID
        // })
        // console.log(this.data.chooseValue);
        this.setData({
            right: options.right
        });

        // 页面初始化 options为页面跳转所带来的参数

        var that = this;
        that.quertionUp();
    },
    methods: {
        quertionUp: function () {
            var that = this;
            uni.showLoading({
                title: '加载中',
                mask: true
            });
            service({
                ...quertionUp,
                data: {
                    right: that.right
                }
            })
                .then((resp) => {
                    uni.hideLoading();
                    console.log(resp.data);
                    this.setData({
                        querstion_quere: resp.data.querstion_quere
                    });
                })
                .catch((error) => {
                    console.log('请求列表失败', error);
                });
        },

        // 查看错题
        toView: function () {
            // 显示弹窗
            this.setData({
                modalShow: true
            });
        },

        // 返回首页
        toIndex: function () {
            uni.switchTab({
                url: '../home/home'
            });
        }
    }
};
</script>
<style>
.container {
    width: 100%;
    height: 100vh;
    padding: 50rpx 30rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.bg-pic {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.bg-pic > image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.line {
    position: relative;
    z-index: 10;
    width: 100%;
}
.line > image {
    width: 100%;
    height: 2px;
    display: block;
}

.results {
    width: 100%;
    margin: 20rpx 0;
    padding: 40rpx 0;
    text-align: center;
    background: linear-gradient(90deg, #910300, #e32f1f, #910300);
    border: 2px solid #920300;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}
.results text {
    font-size: 44rpx;
    color: #fff;
    font-weight: bold;
    display: block;
}
.results text + text {
    margin-top: 10rpx;
}

.results-txt2 {
    margin-top: 20rpx;
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
}
.results-txt2 text {
    font-size: 32rpx;
    color: #ff0101;
    line-height: 1.6;
}

.footer {
    position: relative;
    z-index: 10;
    width: 80%;
    margin: 100rpx auto 0;
    text-align: center;
}
.footer navigator {
    width: 100%;
    background: #bd150d;
    border-radius: 45rpx;
    padding: 20rpx 0;
    font-size: 32rpx;
    font-weight: normal;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 9px 9px rgba(0, 0, 0, 0.36);
    box-shadow: 5px 2px 15px rgba(0, 0, 0, 0.2) inset;
}
.footer navigator:last-child {
    margin-top: 20rpx;
}
</style>
